<template>
  <div class="projectGroupComponent" v-if="item">
    <div class="box">
      <draggable
        class="vlonProjectListWrapper"
        v-model="list"
        handle=".el-icon-rank"
        v-bind="ButtonSwiperOptions"
        @end="listOptionsChange"
        v-if="list && list.length > 0"
      >
        <transition-group tag="ul" class="list">
          <li
            class="vlonListGroupItem"
            v-for="(cl,index) in list"
            :key="cl.proId"
            :data-id="cl.proId"
          >
            <i class="el-icon-rank"></i>

            <div class="rightWrapper">


              <div class="up">
                <span class="pic">
                  <img v-if="cl.proLogo" :src="cl.proLogo" alt="" />
                </span>
                <span class="name">{{ cl.proName }}</span>
              </div>




              <div class="down">
                <span class="title">跳转链接：</span>
                <div class="right">
                  <div class="chooseUrl">
                    <div class="urlBox">
                      <div class="haveUrl" v-if="cl.linkName || cl.linkUrl">
                        <el-button plain disabled class="haveUrlBtn">
                          <i class="el-icon-paperclip"></i>
                          <span>{{ cl.linkName || cl.linkUrl || "" }}</span>
                        </el-button>
                        <el-button
                          type="text"
                          class="updateHref"
                          @click="rightListButtonUpdateLinkHref(index)"
                          >修改</el-button
                        >
                      </div>
                      <div class="noUrl" v-else>
                        <el-button
                          plain
                          class="noUrlBtn"
                          @click="rightListButtonAddLinkHref(index)"
                        >
                          <i class="el-icon-paperclip"></i>
                          选择链接
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>





            <span
              class="el-icon-error delItem"
              v-if="list.length > item.min"
              @click="delItem(cl.proId)"
            ></span>
          </li>
        </transition-group>
      </draggable>

      <el-button
        style="width: 100%"
        v-if="list && list.length < item.max"
        size="small"
        @click="addItem"
        >+添加项目 ({{ list.length }}/{{ item.max }})</el-button
      >
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Bus from "@/utils/bus";
import draggable from "vuedraggable";
import { getToken } from "@/utils/auth";
import headApi from '@/utils/hade';
export default {
  name: "projectGroupComponent",
  data() {
    return {
      currentIndex: 0,
      list: [],
      ButtonSwiperOptions: {
        group: { name: "layout", pull: false, put: false },
        draggable: ".vlonListGroupItem",
        forceFallback: true,
        sort: true,
        animation: 300,
      },
      listIndex:-1,
      projectList: [],
    };
  },
  created() {},
  props: ["item", "rightIndex", "catalogIndex", "id"],
  components: {
    draggable,
    radioComponent: () => import("../lone/radioComponent.vue"),
    radioGroupComponent: () => import("../lone/radioGroupComponent.vue"),
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
      setTimeout(() => {
        this.initFlag = false;
      }, 500);
    });
    Bus.$off(`choosProjectGroupAfter${this.id}`);
    Bus.$on(`choosProjectGroupAfter${this.id}`, (params) => {
      // //console.log(params);
      if (params && params.length > 0) {
        params.forEach((item) => {
          if (!this.list.some((row) => row.proId == item.proId)) {
            item.linkName="";
            item.linkUrl="";
            this.list.push(item);
          }
        });
        // //console.log(this.list);
        this.updateData();
      }
    });
    Bus.$off("chooseSetLinkAfterChooseInProjectLink");
    Bus.$on("chooseSetLinkAfterChooseInProjectLink", (params)=>{
      let list = JSON.parse(JSON.stringify(this.list))
      list[this.listIndex].linkName = params.name;
      list[this.listIndex].linkUrl = params.url;
      this.list = null;
      this.$nextTick(()=>{
        this.list = list;
        this.listIndex = -1;
      })
    });

    //选择全部
    Bus.$off("getAllProjectList");
    Bus.$on("getAllProjectList", ()=>{
      console.log("选择全部");
      this.list=[];
      this.list = this.projectList;
      console.log(this.list);
      this.updateData();
    });
  },
  methods: {
    init() {
      if (this.item) {
        this.list = null;
        this.$nextTick(() => {
          this.list = JSON.parse(JSON.stringify(this.item)).list;
        });
      }
      this.getTableList();
    },
    // //获取项目列表
    getTableList(){
      if(getToken()) {
        this.axios.get(`${headApi}/business/project/list?pageNum=1&pageSize=1000`, { headers: { Authorization: "Bearer " + getToken() } }).then(res=>{
          let {code, data, msg} = res.data;
          if(code == 200) {
            let list = data.list;
            if(list && list.length>0) {
              list.forEach(item=>{
                item.linkName=""
                item.linkUrl=""
              })
              this.projectList = list;
            } else {
              //项目列表为空
            }
          } else {
            this.$message.warning(msg);
          }
        }).catch(err=>{
          console.log(err);
        })
      }
    },
    //同时更新主视图区域中的数据
    updateData(params) {
      //标识是否需要更新Main组件
      let needUpdateMainChild = true;
      // if (this.item.ename === "pageName") {
      //     needUpdateMain = false;
      // }
      if (params !== undefined && params !== null) {
        needUpdateMainChild = params.needUpdateMainChild;
      }
      //更新给直属父级
      this.$emit(
        "updateParent",
        JSON.stringify({
          value: JSON.stringify(this.list),
          ename: "list",
          rightIndex: this.rightIndex,
          catalogIndex: this.catalogIndex,
          needUpdateMainChild: needUpdateMainChild,
          needUpdateMain: false,
        })
      );
    },
    //添加一个项目
    addItem() {
      Bus.$emit(`openChoosProjectGroup`, {
        controlName: "chooseProject",
        controlid: this.id,
      });
    },
    //删除一个项目
    delItem(proId) {
      this.list = this.list.filter((item) => item.proId != proId);
      this.updateData();
    },
    //拖拽放置后执行保存
    listOptionsChange() {
      let list = JSON.parse(JSON.stringify(this.list));
      this.list = null;
      this.list = JSON.parse(JSON.stringify(list));
      this.updateData();
    },

    //修改链接
    rightListButtonUpdateLinkHref(index) {
      this.listIndex = index;
      Bus.$emit("openChooseLinkGroup", {
        name: "chooseInProjectLink",
        controlid: this.id,
      });
    },

    //选择链接
    rightListButtonAddLinkHref(index) {
       this.listIndex = index;
      Bus.$emit("openChooseLinkGroup", {
        name: "chooseInProjectLink",
        controlid: this.id,
      });
    },


  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.projectGroupComponent {
  .vlonProjectListWrapper {
    display: flex;
    flex-direction: column;
    background-color: #f4f6f8;
    margin-bottom: 10px;
    .list {
      display: flex;
      flex-direction: column;
      padding: 15px;
      box-sizing: border-box;
      li.vlonListGroupItem {
        background-color: #fff;
        margin-bottom: 15px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        position: relative;
        padding: 10px;
        box-sizing: border-box;
        &:last-child {
          margin-bottom: 0;
        }
        .el-icon-rank {
          color: #999;
          width: 40px;
        }
        .rightWrapper {
          display: flex;width:330px;
          flex-direction: column;

          .up {display: flex; align-items: center; margin-bottom: 10px;
            .pic {
              margin-right: 10px;
              img {
                width: 40px;
                height: 40px;
              }
            }
            .name {
              font-size: 14px;
              color: #333;
            }
          }
          .down {display: flex; align-items: center;
            .title {
              width: 70px;
              display: flex;
              justify-content: flex-start;
              padding-right: 10px;
              font-size: 12px;
              color:#777;
              box-sizing: border-box;
            }
            .right {
              width: calc(100% - 100px);
              align-items: center;
              display: flex;
              .chooseUrl {
                display: flex;
                flex: 1;
                flex-direction: column;
                .urlBox {
                  .haveUrl {
                    position: relative;
                    .haveUrlBtn {
                      padding: 0;
                      height: 32px;
                      width: 100%;
                      display: flex;
                      justify-content: flex-start;
                      align-items: center;
                      padding-left: 30px;
                      box-sizing: border-box;
                      position: relative;
                      i {
                        border-right: 1px solid transparent;
                        height: 32px;
                        display: flex;
                        box-sizing: border-box;
                        align-items: center;
                        justify-content: center;
                        position: absolute;
                        width: 30px;
                        top: 0;
                        left: 0;
                        z-index: 2;
                      }
                      &:hover {
                        i {
                          border-color: #eee;
                        }
                      }
                    }

                    .updateHref {
                      padding: 0;
                      position: absolute;
                      top: 0;
                      right: 0;
                      z-index: 2;
                      height: 32px;
                      display: flex;
                      align-items: center;
                      width: 60px;
                      justify-content: center;
                      border-radius: 0;
                      border-left: 1px solid #eee;
                    }
                  }
                  .noUrl {
                    .noUrlBtn {
                      padding: 0;
                      height: 32px;
                      width: 100%;
                      display: flex;
                      justify-content: flex-start;
                      align-items: center;
                      padding-left: 30px;
                      box-sizing: border-box;
                      position: relative;
                      i {
                        height: 32px;
                        display: flex;
                        box-sizing: border-box;
                        align-items: center;
                        justify-content: center;
                        position: absolute;
                        width: 30px;
                        top: 0;
                        left: 0;
                        z-index: 2;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .delItem {
          position: absolute;
          right: 15px;
          z-index: 2;
          color: #ccc;
          cursor: pointer;
          &:hover {
            color: #666;
          }
        }
      }
    }
  }
}
</style>
